<script lang="ts">
import { TeleportAntdModalFooter } from '~comp/antd-assist';

export const referInfoPopup = useAntdModal(
  // eslint-disable-next-line import/no-self-import
  defineAsyncComponent(() => import('./ReferPopup.vue')),
  {
    title: toRef(() => $t('7YjbKdYw6BUsOfXCDnmt')),
    wrapClassName: 'ant-cover__Modal-drawer __screen-drawer',
    width: 700,
    centered: true,
    footer: null,
  },
);
</script>

<script lang="ts" setup>
const props = defineProps<{
  code: string;
  url: string;
}>();
const emits = defineEmits<{
  close: [];
}>();

const bonusRuleQry = useQuery({
  queryKey: [apis.apiInviteBonusRules.id],
  queryFn: () => apis.apiInviteBonusRules(undefined),
});
const bonusRuleInfo = computed(() => bonusRuleQry.data.value ?? []);
const tableColumn = computed(() => [
  { key: 'wager', name: $t('klKu1XSep7gXexEgXYmEw') },
  { key: 'bonus', name: $t('hHbOrVGuhcpmWbf0bVEuY') },
  { key: 'amount', name: $t('9l799vq1Ue8CFaZpVkNog'), thClass: 'text-right', tdClass: 'text-right' },
]);
</script>

<template>
  <div class="grid mb-1 gap-4">
    <div class="grid grid-cols-3 gap-3 lt-tablet:grid-cols-1">
      <TCard class="px-3 py-5">
        <div class="mb-2 flex-between">
          <i class="i-local:user-fill text-14.5" />
          <i class="i-local:one text-12" />
        </div>
        <p>{{ $t('kJO0qHb9qdiZrNyy8jKz') }} </p>
        <p class="mt-1 text-3.5 text-sys-text-body leading-normal">
          {{ $t('gyOchFk0MyTgDvntgo43N') }}
        </p>
      </TCard>

      <TCard class="px-3 py-5">
        <div class="mb-2 flex-between">
          <img src="../../../assets/imgs/balance-fill.png" class="w-14.5">
          <i class="i-local:two text-12" />
        </div>
        <p>{{ $t('upqag9NqYgNWecJjzX8s9') }}</p>
        <p class="mt-1 text-3.5 text-sys-text-body leading-normal">
          {{ $t('qzXfcmwtDzytCf0Kzs8Rn') }}
        </p>
      </TCard>

      <TCard class="px-3 py-5">
        <div class="mb-2 flex-between">
          <i class="i-local:unlock text-14.5" />
          <i class="i-local:three text-12" />
        </div>
        <p>{{ $t('qlkZipxIrR4sSvEbx9wda') }}</p>
        <p class="mt-1 text-3.5 text-sys-text-body leading-normal">
          {{ $t('gg5aOs_9Z2KJnDphQIeaA') }}
        </p>
      </TCard>
    </div>

    <TCard class="lt-tablet:p-3" icon="i-local:lock-icon" :title="$t('dE7VogT0iRmi8iHtIo60')">
      <p class="mb-3 text-3.5 text-sys-text-body leading-normal">
        {{ $t('ibPuTWyoRcYnmalQnrdLy') }}
      </p>
      <!-- 表体 -->
      <TSuspenseView v-bind="buildSvPropsOfQuery(bonusRuleQry)" errorClass="min-h-40" outRender>
        <TTable indexId="uid" :columns="tableColumn" :data="bonusRuleInfo">
          <template #wager-td="{ row }">
            <TAmount :value="row.referral_wager" symbol="$" format="pad-dec" colored="full" iconPos="left" />
          </template>
          <template #bonus-td="{ row }">
            <TAmount v-if="Number(row.referral_bonus) > 0" :value="row.referral_bonus" symbol="USDT" format="pad-dec" colored="full" iconPos="right" :decimals="2" />
            <span v-else class="text-sys-text-body">-</span>
          </template>
          <template #amount-td="{ row }">
            <TAmount :value="row.referrer_bonus" symbol="USDT" format="pad-dec" colored="full" iconPos="right" :decimals="2" />
          </template>
        </TTable>

        <template #pending>
          <TTableLoading />
        </template>
        <template #empty />
      </TSuspenseView>
    </TCard>

    <TeleportAntdModalFooter footerClass="!max-w-none">
      <AButton
        class="ant-cover__Button-3d-gray flex-1"
        type="primary" block
        @click="emits('close')"
      >
        {{ $t('pFexkGv2pL4Nl4GmT9ZZm') }}
      </AButton>
      <AButton
        class="ant-cover__Button-3d-primary flex-1"
        type="primary" block
        @click="[globalPopups.referralShare.open({ code: props.code, url: props.url }), emits('close')]"
      >
        {{ $t('6CuHqQjSdUsoRQuyMYj') }}
      </AButton>
    </TeleportAntdModalFooter>
  </div>
</template>

<style lang="scss"  scoped>
.a {
  display: grid;
  grid-template-columns: 1;
}
</style>
